<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar @click-left="leftFn" @click-right="$router.push('/login')">
      <template #left>
        <van-icon name="search" size="18" color="#fff" />
      </template>
      <template #title>
        <van-button class="van-ellipsis" @click="$router.push('/home')">{{
          address
        }}</van-button>
      </template>
      <template #right>
        <van-icon name="contact" size="18" color="#fff" />
      </template>
    </van-nav-bar>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
      <van-swipe-item>
        <van-grid square>
          <van-grid-item
            v-for="item in index_entryList.slice(0, 8)"
            :key="item.id"
            :icon="item.image_url | join"
            :text="item.title"
            @click="toEntry(item.id, item.title)"
          />
        </van-grid>
      </van-swipe-item>
      <van-swipe-item
        ><van-grid square>
          <van-grid-item
            v-for="item in index_entryList.slice(8)"
            :key="item.id"
            :icon="item.image_url | join"
            :text="item.title"
            @click="toEntry(item.id, item.title)"
          /> </van-grid
      ></van-swipe-item>
    </van-swipe>

    <!-- 店铺信息 -->
    <merchants
      :arr="item"
      v-for="item in shoppingList"
      :key="item.id"
      :geohash="geohash"
      :ids="item.id"
    ></merchants>
    <!-- 店铺信息 -->

    <!-- 底部 -->
    <footerNav></footerNav>
  </div>
</template>

<script>
import footerNav from "@/components/footer.vue";
import merchants from "@/components/merchants.vue";
import { shopping, index_entry } from "@/api/index.js";
import { address } from "@/api/cities.js";
export default {
  components: {
    merchants,
    footerNav,
  },
  created() {
    // console.log(geohash);
    address(this.geohash).then((res) => {
      // console.log(res);
      this.address = res.data.name;
    });
    let hash = this.geohash.split(",");
    index_entry().then((res) => {
      // console.log(res);
      this.index_entryList = res.data;
    });
    shopping({
      latitude: hash[0],
      longitude: hash[1],
    }).then((res) => {
      this.shoppingList = res.data;
    });
  },
  data() {
    return {
      index_entryList: [],
      shoppingList: [],
      address: "",
      geohash: this.$route.query.geohash || localStorage.getItem("geohash"),
    };
  },
  filters: {
    join(val) {
      return "https://fuss10.elemecdn.com" + val;
    },
  },
  methods: {
    toEntry(id, title) {
      this.$router.push({
        path: "/index_entry",
        query: {
          id,
          title,
        },
      });
    },
    leftFn() {
      this.$router.push({
        path: "/search",
        query: { geohash: this.geohash },
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: #39a9ed;
}
.van-button {
  width: 240px;
  background-color: #39a9ed;
  border: 0;
}
// 轮播样式
.my-swipe {
  margin-bottom: 20px;
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
  }
}
</style>

